<script setup>
import SubjectList from '@/views/subject/index'
import { delSubject, getAuthList, updateUserSubject } from '@/api/subject/subject'
import { listUser } from '@/api/system/user.js'
const { proxy } = getCurrentInstance()

const route = useRoute()
const subjectList = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  userId: route.params && route.params.userId
})
const total = ref(0)
const selectName = ref('')
const authId = ref('')
const getList = () => {
  getAuthList(queryParams.value).then(response => {
    subjectList.value = response.rows
    total.value = response.total
  })
}
const handleDelete = (row) => {
  selectName.value = row.subjectName
  const subjectIds = authId.value
  const valuesToRemove = new Set([row.id.toString()])
  const result = subjectIds
    .split(',') // 将字符串分割为数组
    .filter(value => !valuesToRemove.has(value)) // 过滤掉要去除的值
    .join(',')
  proxy.$modal.confirm('是否确认取消授权专题名称为"' + selectName.value + '"的数据项?').then(async () => {
    const params = {
      userId: route.params && route.params.userId,
      subjectIds: result
    }
    const res = await updateUserSubject(params)
    proxy.$message.success('取消授权成功')
    // return delSubject()
  }).then(() => {
    getList()
    getAuthIds()
  }).catch(() => {})
}
const getAuthIds = async () => {
  const userId = route.params && route.params.userId
  listUser({ userId }).then(res => {
    authId.value = (res.rows)[0].subjectIds
  })
}
const authSuccess = () => {
  getList()
  getAuthIds()
}
onMounted(() => {
  getList()
  getAuthIds()
})
</script>

<template>
  <div class="app-container">
    <h4 class="form-header h4">
      已授权访问
    </h4>
    <div class="table-box">
      <el-table
        ref="logininforRef"
        :data="subjectList"
      >
        <el-table-column
          label="专题名称"
          align="center"
          prop="subjectName"
        />
        <el-table-column
          label="专题编号"
          align="center"
          prop="subjectCode"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          prop="opt"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <div>
              <el-button
                link
                type="danger"
                icon="Delete"
                @click="handleDelete(scope.row)"
              >
                取消授权
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <h4 class="form-header h4">
      专题列表
    </h4>
    <SubjectList
      :is-auth="true"
      :auth-ids="authId"
      @auth-success="authSuccess"
    />
  </div>
</template>

<style scoped lang="scss">
.table-box {
  margin-bottom: 32px;
}
</style>
